// components/swi/switch.js
Component({
  // externalClasses: ['custom-class'],
  // options: {
  //   // 在组件定义时的选项中启用多slot支持
  //   multipleSlots: true,
  // },
  /**
   * 组件的属性列表
   */
  properties: {
    // switch开关状态
    checked: {
      type: Boolean,
      value: false,
    },
    // switch-circle 的高宽，最小为12，该出默认单位为px
    size: {
      type: Number,
      value: 16,
      observer(newVal, oldVal) {
        let val = Math.round(newVal)
        if(val >= 12) {
          this.setData({
            circleSize: val * 2,
          })
        }
      },
    },
    // 文字大小，最小为10，默认单位px
    fontSize: {
      type: Number,
      value: 12,
      observer(newVal, oldVal) {
        let val = Math.round(newVal)
        if(val >= 10) {
          this.setData({
            font: val * 2,
          })
        }
      },
    },
    // 打开颜色 #cecece
    activeColor: {
      type: String,
      value: '#4095e5',
    },
    // 关闭颜色
    inactiveColor: {
      type: String,
      value: '#d6d6d6',
    },
    // 打开文本
    activeText: {
      type: String,
      value: '打开文本'
    },
    // 关闭文本
    inactiveText: {
      type: String,
      value: '关闭文本',
    },
    // 是否禁用
    disabled: {
      type: Boolean,
      value: false,
    },
    // 是否可自己切换开关checked与否
    canControl: {
      type: Boolean,
      value: true,
    },
  },

  // 监听
  observers: {
    'activeText, inactiveText'(activeText, inactiveText) {
      let len0 = activeText.length,
          len1 = inactiveText.length,
          len = len0 > len1 ? len0 : len1
      this.setData({
        textLen: len,
      })
    },
  },

  /**
   * 组件的初始数据
   */
  data: {
    circleSize: 32,
    font: 24,
    textLen: 0,
    padding: 12,
  },

  /**
   * 组件的方法列表
   */
  methods: {
    toggle(e) {
      let { checked, disabled, canControl, } = this.data
      if(disabled) return
      // this.setData({
      //   checked: !checked,
      // })
      if(canControl) {
        this.setData({
          checked: !checked,
        })
      }
      this.triggerEvent('change', !checked)
    },
  },
})
